<template>
  <div class="spec-details">
    <div class="swiper-container">
    <van-swipe :autoplay="3000" class="my-swipe">
      <van-swipe-item
       v-for="picture in photoes"
       :key="picture.id"
      >
        <img v-lazy="picture.url" />
      </van-swipe-item>
    </van-swipe>
    </div>
     <span id="text">{{text}}</span>
     <br>
     <div>
       <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      />
      <!-- 优惠券列表 -->
      <van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
     <!-- <van-cell is-link @click="showPopup1" class="getCoupon">领券: <button>满499-50</button><button>满199-15</button></van-cell>
     <van-popup v-model="show1" position="bottom" :style="{ height: '40%' }" closeable round >
       <div class="content">
         <p class="title">领优惠券</p>
         <hr>
         <div class="context">
            <p>可领优惠券</p>
            <p class="match1">
              <img src="../../assets/01.png" alt="">
              <span class="film">
                  <span>优惠满499-50，
                    领取三天内可用</span>
                  <button @click="getmoney">领取</button>
              </span>
            </p>
            <p class="match1">
              <img src="../../assets/02.png" alt="">
              <span class="film">
                  <span>优惠满199-15，
                    领取三天内可用</span>
                  <button @click="getmoney">领取</button>
              </span>
            </p>
          </div>
        </div>
     </van-popup> -->
     </div>
     <div>
     <van-cell is-link @click="showPopup2" class="promotion">促销 <span>[满件减] 满2件减30</span></van-cell>
     <van-popup v-model="show2" position="bottom" :style="{ height: '40%' }" closeable round >
       <div class="content1">
         <p class="title">促销活动</p>
         <hr>
         <div class="context1">
            <span><b>[满件减]</b> 满2件减30</span>
            <button @click="getorder">点击凑单</button>
          </div>
        </div>
     </van-popup>
     </div>
     <div>
     <van-cell is-link @click="showPopup3">配送:
       <span class="send">
       <span>上海    至 <i class="iconfont">&#xe611;</i>
          <span v-if="addr.length === 0">成都市  龙泉驿区</span>
          <span v-else>
            <span v-if="addr1.length === 0">
              {{addr}}
            </span>
            <span v-else>
              {{addr}}  {{addr1}}
            </span>
          </span>
       </span>
       <br>
       <span class="time">16：00之前完成支付，预计7月20日送达</span>
       </span>
      </van-cell>
     <van-popup v-model="show3" position="bottom" :style="{ height: '40%' }"  round >
       <van-area title="地点" :area-list="areaList" value="110101" @cancel="cancelcon" ref="place" @confirm="okcon"/>
     </van-popup>
     </div>
     <div>
     <van-cell is-link @click="showPopup4" class="free">运费： <span>免运费</span></van-cell>
     <van-popup v-model="show4" position="bottom" :style="{ height: '30%' }" closeable round >
       <div class="content">
         <p class="title">运费说明</p>
         <hr>
         <div class="context">
            <p>配送至成都市龙泉驿区大面镇</p>
          </div>
        </div>
     </van-popup>
     </div>

    <van-divider>商品图文详情</van-divider>
    <div class="specdetail-context">
      <img
        v-for="item in detailscontext"
        :key="item.image.id"
        v-lazy="item.image.url" />
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="total" @click="jumpToCart"/>
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addToCartHandler"/>
      <van-goods-action-button type="danger" text="立即购买" @click="pushshop"/>
  </van-goods-action>
  </div>
</template>

<script>
import { getSpecDetails } from '@/api/specdetails'
import { mapMutations, mapGetters } from 'vuex'
import address from './address'
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元'
}
export default {
  name: 'SpecDetails',
  data () {
    return {
      photoes: [],
      detailscontext: [],
      text: [],
      details: [],
      addr: [],
      addr1: [],
      // show: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      areaList: address,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false
    }
  },
  computed: {
    ...mapGetters('cart', ['totalCount']),
    total () {
      return this.totalCount
    }
  },
  created () {
    console.log(this)
    if (this.$route.params.id) {
      sessionStorage.setItem('bid', this.$route.params.id)
    } else {
      this.$route.params.id = sessionStorage.getItem('bid')
    }
    getSpecDetails(this.$route.params.id)
      .then(res => {
        // 轮播图
        this.photoes = res.photo
        // 图文详情
        // if (res.descContentList.image) {
        //   this.detailscontext = res.descContentList
        // }
        this.detailscontext = res.descContentList.filter(item => item.image)
        // 商品简介
        this.text = res.title
        this.details = res
      })
  },
  methods: {
    ...mapMutations('cart', ['addToCart']),
    jumpToCart () {
      this.$router.push('/cart')
    },
    addToCartHandler () {
      const { id, title, thumbnail, price } = this.details
      const payload = {
        id,
        title,
        desc: title,
        img: thumbnail,
        amount: 1,
        price,
        checked: true
      }
      this.addToCart(payload)
      // this.$store.commit('addToCart', payload)
    },
    pushshop () {
      console.log(123)
      this.$router.push('/mine')
    },
    showPopup1 () {
      this.show1 = true
    },
    showPopup2 () {
      this.show2 = true
    },
    showPopup3 () {
      this.show3 = true
    },
    showPopup4 () {
      this.show4 = true
    },
    cancelcon () {
      this.show3 = false
    },
    okcon (res) {
      console.log(res)
      this.addr = res[1].name
      if (!res[2]) {
        this.addr = res[1].name
      } else {
        this.addr = res[1].name
        this.addr1 = res[2].name
      }
      this.show3 = false
    },
    getmoney () {
      this.$router.push('/mine')
    },
    getorder () {
      this.$router.push('/mine')
    },
    onChange (index) {
      this.showList = false
      this.chosenCoupon = index
    },
    onExchange (code) {
      this.coupons.push(coupon)
    }
  }
}
</script>

<style lang="scss" scoped>
  .swiper-containe{
    width:100%;
    height:0;
    padding-top: calc(100% * 600 / 600);
    position: relative;
    .my-swipe{
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right:0;
      .van-swipe-item img {
        width: 100%;
        height: 100%;
    }
  }
 }
  #text{
    display: block;
    width:90%;
    margin: 0 auto;
    font-size: 15px;
    font-family: '楷体';
  }
  .content{
    .title{
      width: 100%;
      height: 20px;
      line-height: 43px;
      text-align: center;
      font-size: 16px;
      margin-left: 10px;
      // margin-top: 10px;
    }
    .context{
      p{
        margin-left: 10px;
        font-size: 14px;
        display: flex;
        img{
          width: 110px;;
          height: 70px;
        }
      }
    }
    .match1{
      .film{
        display: block;
        width: 240px;
        height: 70px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        background: #fffafa;
        span{
          word-wrap: wrap;
        }
        button{
          width: 60px;
          height:20px;
          text-align: center;
          line-height: 20px;
          background: #ff0810;
          border:1px solid red;
          border-radius: 10px 10px;
          color: white;

        }
      }
    }
  }
  .content1{
    .title{
      width: 100%;
      height: 20px;
      line-height: 43px;
      text-align: center;
      font-size: 16px;
      margin-left: 10px;
      // margin-top: 10px;
    }
    .context1{
      display: flex;
      font-size: 14px;
      justify-content: space-around;
      b{
        color: red;
      }
     button{
          width: 60px;
          height:20px;
          text-align: center;
          line-height: 20px;
          background: white;
          border:1px solid red;
          border-radius: 10px 10px;
          color: red;
          font-size: 11px;
        }
    }
  }
  .getCoupon{
    button{
          margin-left: 15px;
          width: 60px;
          height:20px;
          text-align: center;
          line-height: 20px;
          background: white;
          border:1px solid red;
          border-radius: 10px 10px;
          color: red;
          font-size: 11px;
        }
  }
  .promotion{
    span{
      color: red;
      font-size: 12px;
      margin-left: 15px;
    }
  }
  .send{
    font-size: 12px;
    span:first-child{
      margin-left: 10px;
    }
    .time{
      margin-left: 46px;
    }
    span{
       white-space: pre-wrap;
    }
  }
  .free{
    span{
      font-size: 12px;
    }
  }
</style>
